<template>
    <div>
        <div>
            <div class="m-25 mt-65">
                <div class="normal-box-mod">
                    <div class="normal-box-bd">
                        <div class="normal-list-page-mod">
                            <div class="mb-2"
                                 style="margin-bottom:20px">
                                <Button custom-icon="iconfont icon-fangkuai2"
                                        size="small"
                                        type="primary"
                                        @click="showScore"
                                        >
                                    添加回收物品积分
                                </Button>
                            </div>
                            <div class="normal-list-page-bd">
                                <Table :columns="columns"
                                       :data="list.data"
                                       border></Table>
                            </div>
                            <Page :total="queryData.totalRecord"
                                  :current="queryData.page"
                                  :page-size="queryData.limit"
                                  show-total
                                  show-elevator
                                  show-sizer
                                  @on-change="changePage"
                                  @on-page-size-change="changePageSize"
                                  style="text-align: center;" />
                        </div>
                    </div>
                    <!-- 新建-->
                    <Modal v-model="level1Modal.modal1"
                           :title="level1Modal.title"
                           @on-ok="postData"
                           @on-cancel="cancel"
                           height="600px">
                        <Form :model="level1Modal.formData"
                              :rules="level1Modal.ruleValidate"
                              ref="systemFro"
                              :label-width="130">
                            <FormItem label="基础计数"
                                      prop="basicNum">
                                <Input v-model="level1Modal.formData.basicNum"
                                       placeholder="请输入基础计数"
                                       style="width:350px;"></Input>
                            </FormItem>
                            <FormItem label="计量单位"
                                      prop="unit">
                                <Input v-model="level1Modal.formData.unit"
                                       placeholder="请输入计量单位"
                                       style="width:350px;"></Input>
                            </FormItem>
                            <FormItem label="对应积分"
                                      prop="basicScore">
                                <Input v-model="level1Modal.formData.basicScore"
                                       placeholder="请输入对应积分"
                                       style="width:350px;"></Input>
                            </FormItem>

                        </Form>
                    </Modal>
                    <!-- 添加回收物品积分弹层 -->
                    <Modal v-model="level2Modal.modal2"
                           :title="level2Modal.title"
                           @on-ok="postScore"
                           @on-cancel="cancelScore"
                           height="600px">
                        <Form :model="level2Modal.formData"
                              :rules="level2Modal.ruleValidate"
                              ref="systemScore"
                              :label-width="130">
                            <!-- <FormItem label="回收企业名称"
                                      prop="companyName">
                                <Input v-model="level2Modal.formData.companyName"
                                       placeholder="请输入企业名称"
                                       style="width:350px;"
                                       disabled></Input>
                            </FormItem>
                            <FormItem label="回收物品名称"
                                      prop="typeName">
                                <Input v-model="level2Modal.formData.typeName"
                                       placeholder="请输入回收物品名称"
                                       style="width:350px;"
                                       disabled></Input>
                            </FormItem> -->
                            <FormItem label="回收物品名称"
                                      prop="state">
                                <Select @on-change="changeCode"
                                        clearable
                                        label-in-value="true"
                                        
                                        style="width:350px;">
                                    <Option v-for="item in level2Modal.options"
                                            :value="item.value"
                                            :key="item.value">{{ item.label }}</Option>
                                </Select>

                            </FormItem>
                            <FormItem label="基础计数"
                                      prop="basicNum">
                                <Input v-model="level2Modal.formData.basicNum"
                                       placeholder="请输入基础计数"
                                       style="width:350px;"></Input>
                            </FormItem>
                            <FormItem label="计量单位"
                                      prop="unit">
                                <Input v-model="level2Modal.formData.unit"
                                       placeholder="请输入计量单位(如克、千克、台、辆、部)"
                                       style="width:350px;"></Input>
                            </FormItem>
                            <FormItem label="对应积分"
                                      prop="basicScore">
                                <Input v-model="level2Modal.formData.basicScore"
                                       placeholder="请输入对应积分"
                                       style="width:350px;"></Input>
                            </FormItem>
                        </Form>
                    </Modal>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ScoreApi from '@/api/recycle/score.js'
export default {
	props: ['companyScoreData'],
	data() {
		return {
			queryData: {
				page: 1,
				limit: 10,
				companyId: ''
			},
			columns: [
				{
					title: 'id',
					key: 'id',
					align: 'center'
				},
				// {
				// 	title: '回收物品ID',
				// 	key: 'typeId',
				// 	align: 'center'
				// },
				{
					title: '回收物品名称',
					key: 'typeName',
					align: 'center'
				},
				// {
				// 	title: '回收物品编码',
				// 	key: 'typeCode',
				// 	align: 'center'
				// },
				// {
				// 	title: '管理人员身份',
				// 	key: 'adminType',
				// 	align: 'center',
				// 	render: (create, params) => {
				// 		let s = params.row.adminType
				// 		let color, text
				// 		if (s == 1) {
				// 			color = '#5ed71a'
				// 			text = '企业管理员'
				// 		} else if (s == 2) {
				// 			color = '#5ed71a'
				// 			text = '网点管理员'
				// 		} else if (s == 3) {
				// 			color = '#5ed71a'
				// 			text = '网点回收员'
				// 		} else if (s == 4) {
				// 			color = '#5ed71a'
				// 			text = '网点清运人员'
				// 		}
				// 		return create(
				// 			'div',
				// 			{
				// 				style: {
				// 					color: color,
				// 					borderRadius: '20px'
				// 				}
				// 			},
				// 			text
				// 		)
				// 	}
				// },
				// {
				// 	title: '回收企业ID',
				// 	key: 'companyId',
				// 	align: 'center'
				// },
				{
					title: '回收企业名称',
					key: 'companyName',
					align: 'center'
				},
				{
					title: '基础计数',
					key: 'basicNum',
					align: 'center'
				},
				{
					title: '计量单位',
					key: 'unit',
					align: 'center'
				},
				{
					title: '对应积分',
					key: 'basicScore',
					align: 'center'
				},
				{
					title: '状态',
					key: 'state',
					align: 'center',
					render: (h, params) => {
						let s = params.row.state
						console.log(s, '111111')
						return h('i-switch', {
							props: {
								value: s,
								size: 'large'
							},
							scopedSlots: {
								open: () => h('span', '正常'),
								close: () => h('span', '停用')
							},
							on: {
								'on-change': value => {
									this.changeState(params.row, value)
									// if (s == value) {
									// 	alert(1111)
									// }
								}
							}
						})
					}
				},
				{
					title: '创建人',
					key: 'createName',
					align: 'center'
				},
				{
					title: '添加时间',
					key: 'createTime',
					align: 'center'
				},
				{
					title: '更新时间',
					key: 'updateTime',
					align: 'center'
				},
				/** 自动生成结束 */
				{
					title: '操作',
					align: 'center',
					minWidth: 150,
					render: (h, params) => {
						// 动态渲染组件
						return h('div', { class: 'action-group' }, [
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '修改企业回收价格'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.showUpdateModal(
														params.row
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-bianjisekuai',
													size: 18
												}
											})
										]
									)
								]
							),
						])
						// }
					}
				}
			],
			list: {
				data: []
			},
			level1Modal: {
				modal1: false,
				title: '',
				formData: {},
				ruleValidate: {
					basicNum: [
						{
							pattern: /^(0?|-?[1-9]\d*)$/,
							message: '请输入格式为整数的基础计数',
							trigger: 'blur'
						}
					],
					basicScore: [
						{
							pattern: /^(0?|-?[1-9]\d*)$/,
							message: '请输入格式为整数的基础计数',
							trigger: 'blur'
						}
					]
				},
				companyAdminOptions: [
					// {
					// 	value: 4,
					// 	label: '杭州拱墅区再生资源回收有限公司'
					// },
				],
				adminType: [
					{
						value: 1,
						label: '企业管理员'
					},
					{
						value: 2,
						label: '网点管理员'
					},
					{
						value: 3,
						label: '网点回收员'
					},
					{
						value: 4,
						label: '网点清运人员'
					}
				],
				options: [
					
				],
				recyclingCompanyNameFlag: false,
				companyNameFlag: false
			},
			levelSiteModal: {
				modal: false,
				title: '回收站点管理员',
				formData: {},
				flag: false,
                options: [
					
				],
			},
			adminFlag: false,
			level2Modal: {
				modal2: false,
				title: '添加回收物品积分',
				formData: {},
                options: [
					
				],
				ruleValidate: {
					unit: [
						{
							required: true,
							message: '请输入计量单位',
							trigger: 'blur'
						}
					],
					basicNum: [
						{
							required: true,
							message: '请输入基础计数',
							trigger: 'blur'
						},
						{
							pattern: /^(0?|-?[1-9]\d*)$/,
							message: '请输入格式为整数的基础计数',
							trigger: 'blur'
						}
					],
					basicScore: [
						{
							required: true,
							message: '请输入对应积分',
							trigger: 'blur'
						},
						{
							pattern: /^(0?|-?[1-9]\d*)$/,
							message: '请输入格式为整数的对应积分',
							trigger: 'blur'
						}
					]
				}
			}
		}
	},
	// 监听companyScoreData是否变化
	watch: {
		companyScoreData(newValue, oldValue) {
			if (newValue != oldValue) {
                this.queryData.page = 1
                this.level2Modal.options = []
				this.getPageList()
				this.getTypeList()
			}
		}
	},
	mounted() {
		this.getPageList()
	},
	created() {
		this.getTypeList()
	},
	computed: {},
	methods: {
        cancelScore(){
            
            // this.level2Modal.options = []
            this.$refs['systemScore'].resetFields()
            console.log(this.level2Modal.options,'11111111111111111111111111111111111111111')
        },
		async getPageList() {
			this.queryData.companyId = this.companyScoreData.id
			let data = (await ScoreApi.getPageList(this.queryData)).data
			this.list.data = data.list
			this.queryData.limit = data.pageSize
			this.queryData.page = data.pageNum
			this.queryData.totalRecord = data.totalRecord
		},
		async getTypeList() {
			let data = (await ScoreApi.getTypeList()).data
			console.log(data, '1111111')
			const result = data.map(item => ({
				value: item.id,
				label: item.name
			}))
			// this.level1Modal.options = result
            this.level2Modal.options = result
            console.log(this.level2Modal.options,'111111111111111111111111111111111')
		},
		showUpdateModal(row) {
			this.adminFlag = true
			this.level1Modal.formData.id = row.id
			this.level1Modal.formData.basicNum = row.basicNum
			this.level1Modal.formData.unit = row.unit
			this.level1Modal.formData.basicScore = row.basicScore
			// this.level1Modal.formData.state = JSON.stringify(row.state)
			this.level1Modal.modal1 = true
			this.level1Modal.title = '编辑回收价格'
			console.log(this.level1Modal.formData, '3333333333')
		},
		postData() {
			let that = this
			this.$refs['systemFro'].validate(valid => {
				if (valid) {
					if (that.level1Modal.formData.id) {
						//修改
						ScoreApi.update(that.level1Modal.formData).then(res => {
							if (res.code == 0) {
								that.$Message.success('修改成功')
								that.level1Modal.modal1 = false
								that.getPageList()
								this.$refs['systemFro'].resetFields()
								return
							} else {
								this.$refs['systemFro'].resetFields()
								that.$Message.error(res.message)
							}
						})
					}
				} else {
					this.$Message.error('请填写完整的表单项')
				}
			})
		},
		// 展示回收站点弹层
		showScore() {
				this.level2Modal.modal2 = true
				this.level2Modal.formData.companyId = Number(this.companyScoreData.id)
				this.level2Modal.formData.companyName = this.companyScoreData.companyName
				// this.level2Modal.formData.typeId = Number(row.typeId)
				// this.level2Modal.formData.typeCode = row.typeCode
				// this.level2Modal.formData.typeName = row.typeName
			
		},
		postScore() {
			let that = this
			this.$refs['systemScore'].validate(valid => {
				if (valid) {
					that.level2Modal.formData.basicNum = Number(
						that.level2Modal.formData.basicNum
					)
					that.level2Modal.formData.basicScore = Number(
						that.level2Modal.formData.basicScore
					)
                    
					if (that.level2Modal.formData.typeId) {
						that.level2Modal.formData.state = true
						ScoreApi.add(that.level2Modal.formData).then(res => {
							if (res.code == 0) {
								that.$Message.success('修改成功')
								that.level2Modal.modal2 = false
								that.getPageList()
								this.$refs['systemScore'].resetFields()
								return
							} else {
								this.$refs['systemScore'].resetFields()
								that.$Message.error(res.message)
							}
						})
					}
				} else {
					this.$Message.error('请填写完整的表单项')
				}
			})
		},
		changeState(row, value) {
			console.log(value, '22222')
			let that = this
			this.$Modal.confirm({
				title: '确认修改',
				content:
					'<p>您确认修改id为 <strong>' +
					row.id.toString() +
					'</strong> 的 <strong>' +
					row.typeName.toString() +
					'</strong> 的回收物品的状态吗?</p>',
				loading: true,
				onOk: () => {
					var formData = {
						id: row.id,
						state: value
					}
					console.log(formData, '11111111111')
					ScoreApi.update(formData).then(res => {
						this.$Modal.remove()
						if (res.code == 0) {
							that.$Message.success('修改成功')
							that.level1Modal.modal1 = false
							that.getPageList()
							this.$refs['systemFro'].resetFields()
							return
						} else {
							this.$refs['systemFro'].resetFields()
							that.$Message.error(res.message)
						}
					})
				},
				onCancel: () => {
					this.getPageList()
				}
			})
		},
		changeCode(val) {
			this.level2Modal.formData.typeId = Number(val.value)
			this.level2Modal.formData.typeName = val.label
			console.log(this.level2Modal.formData, 'this.level2Modal.formData')
		},
		// 分页
		changePage(page) {
			this.queryData.page = page
			this.getPageList()
		},
		changePageSize(pageSize) {
			this.queryData.limit = pageSize
			this.getPageList()
		},
	}
}
</script>
<style scoped>
</style>
